<!DOCTYPE html>
<html lang="en">

<head>
  <title>Chapter 5: Summary cards with hover interactions | Tiny CSS Projects</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
</head>

<body>
<header>
    <h1>Hotels</h1>
  </header>
  <main>
    <section class="meeru-island">
      <div>
        <h2>Meeru Island Resort & Spa</h2>
        <p>The stylish Meeru Island Resort & Spa strikes the perfect note for a peaceful escape.</p>
        <a href="#">Learn more</a>
      </div>
    </section>
    <section class="flamingo-beech">
      <div>
        <h2>Flamingo Beach</h2>
        <p>Plenty of pools and activities to keep children smiling, plus comfy apartments that are tailored for
          families.</p>
        <a href="#">Learn more</a>
      </div>
    </section>
    <section class="protur-safari">
      <div>
        <h2>Protur Safari Park</h2>
        <p>The big, family-friendly complex dishes up plenty of pools and activities.</p>
        <a href="#">Learn more</a>
      </div>
    </section>
    <section class="mountain-view">
      <div>
        <h2>Mountain View Resort</h2>
        <p>There are heaps of spots to soak in at the super-sized Holiday Village Costa del Sol.</p>
        <a href="#">Learn more</a>
      </div>
    </section>
  </main>
</body>
</html>
